很多設(shè)計師在做設(shè)計前可能會找很多的參考，發(fā)現(xiàn)哪一個參考設(shè)計得還不錯，不經(jīng)過任何的思考就直接開抄，但是你真的抄明白了嗎？
對于為什么要這么設(shè)計進(jìn)行思考了嗎？這樣照抄下來真的適合自己的產(chǎn)品嗎？又如何說服他人同意自己的方案呢？
除了分析別人為什么要這么設(shè)計之外，更重要的是要知道這樣設(shè)計的原理是什么，通過了解設(shè)計原理才能更好的將原理運(yùn)用到自己的設(shè)計中，而不是直接照搬別人的設(shè)計。
設(shè)計師除了要掌握一門手藝活，還要擁有海量的知識做儲備，不然就永遠(yuǎn)只能算得上一個“美工”。
今天將通過學(xué)習(xí)和整理來分享有關(guān)設(shè)計中的交互心理知識，通過四個方面（理論基礎(chǔ)、深度解析、舉例說明、自我總結(jié)）去進(jìn)行知識的梳理和總結(jié)。
在文章開始前引用交互設(shè)計之父阿蘭·庫珀的一句話，“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”。
一、什么是費(fèi)茨法則？
1954年，當(dāng)時擔(dān)任美國空軍人類工程學(xué)部門主任的保羅·費(fèi)茨（Paul M. Fitts）博士，對人類操作過程中的運(yùn)動特征、運(yùn)動時間、運(yùn)動范圍和運(yùn)動準(zhǔn)確性進(jìn)行了研究，提出了著名的Fitts定律。
該定律指出，使用指點(diǎn)設(shè)備到達(dá)一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。
二、費(fèi)茨法則解析
01費(fèi)茨法則公式
1.1 T ：用戶擊中目標(biāo)所需的時間（時間）
費(fèi)茨法則中研究的關(guān)鍵是指、點(diǎn)設(shè)備執(zhí)行動作的運(yùn)動時間，試圖找到一個相關(guān)因素來提高執(zhí)行一個選中動作的效率，研究的是一個指向性的操作。
完成操作的需要的時間與什么因素相關(guān)是費(fèi)茨法則所研究的問題，通常我們進(jìn)行一次目的地明確的指點(diǎn)動作可以細(xì)分為兩個部分：
① 首先一個大幅度的移動，將指點(diǎn)設(shè)備移向與目標(biāo)大致相同的方向和區(qū)域
② 緊接著是一系列精細(xì)的小幅度微調(diào)，來將指點(diǎn)設(shè)備精確定位在目標(biāo)中心
現(xiàn)在就可以做一個小實(shí)驗來觀察這一過程：
舉起你的手臂并試著用手指指向遠(yuǎn)處的一個小物體，例如遠(yuǎn)處墻上的一個電燈開關(guān)
開始你的手臂可能會往開關(guān)的位置大幅的移動而且很有可能稍微過頭了一點(diǎn)
接下來你會做一些微小的調(diào)整動作直至你的手指正好對準(zhǔn)目標(biāo)開關(guān)的中心
——引自 Ashley Towers
上面這個例子中，要準(zhǔn)確對準(zhǔn)電燈開關(guān)這一系列動作所消耗的時間，就是費(fèi)茨定律要研究的關(guān)鍵指標(biāo)；
而在人機(jī)界面交互中，在研究優(yōu)化用戶體驗時，通常也希望能幫助用戶快速而精準(zhǔn)地完成一系列指點(diǎn)操作
但費(fèi)茨法則也有它的適用范圍局限性，不是任何場景都可以去強(qiáng)行套用，關(guān)于費(fèi)茨定律有一點(diǎn)需要注意：
費(fèi)茨法則主要用于表現(xiàn)指、點(diǎn)動作的概念模型，指點(diǎn)設(shè)備可以是鼠標(biāo)、手，甚至腳（油門與剎車設(shè)計中也包含了費(fèi)茨法則的奧義）
1.2 D ：目標(biāo)距離用戶的遠(yuǎn)近（起始點(diǎn)到目標(biāo)中心的距離）
根據(jù)公式，時間（T）與距離（D）成正相關(guān)，即起始點(diǎn)與目標(biāo)區(qū)域越近，那么指點(diǎn)動作的時間越短，有效觸及目標(biāo)的可能性越高。
那么是不是我們設(shè)計控件時，將元素位置都盡量貼近就合理的了呢？并不是！??！
首先是把元素位置都擠在一起，影響設(shè)計視覺風(fēng)格，在“Less is More”留白美學(xué)盛行的當(dāng)下，盲目減少元素與元素之間的間距肯定是不可取的
其次因為距離越小，有效觸及目標(biāo)的可能性越高，不注意把控元素與元素之間的間距，也很可能導(dǎo)致用戶產(chǎn)生誤觸，反而降低了用戶的點(diǎn)擊效率，以分頁控件來舉個例子：
第一個分頁間距雖小，但是也導(dǎo)致用戶微調(diào)的時間增加了，誤觸的可能性也隨之增大了
第二個雖然分頁間距沒有多大的改進(jìn)，但可點(diǎn)擊區(qū)域（熱區(qū)）增大了，還是能夠減少用戶誤觸可能性的
第三個不論是分頁間距、熱區(qū)大小、視覺風(fēng)格上，都是在三版之中可行性最高的。
這么看來，熱區(qū)大小果然也是費(fèi)茨定律中不可忽略的因素之一
1.3 W ：目標(biāo)區(qū)域大?。繕?biāo)在移動軸方向上的寬度）
依然用到 Ashley Towers 指電燈開關(guān)的例子
現(xiàn)在你試著指向一個更大的物體，比如說顯示器或者是墻壁，這次你也會以大幅度的手臂動作來使手指指向目標(biāo)方向
但因為目標(biāo)體積很大，所以一般情況下你只需要做很少（甚至不需要任何）的微調(diào)，這意味著增加目標(biāo)區(qū)域的有效可觸區(qū)域，可以顯著提高用戶點(diǎn)擊效率
但在UI設(shè)計中，不要為了讓用戶方便選中，而盲目放大目標(biāo)的區(qū)域大小
當(dāng)按鈕的尺寸大到一個的臨界點(diǎn)時，點(diǎn)擊準(zhǔn)確率就趨于一個平衡值了，再增大按鈕并不能提升體驗，反而可能影響視覺構(gòu)圖效果
在保證可觀的視覺構(gòu)圖的前提下，我們可以通過技巧來增大可點(diǎn)擊區(qū)域，例如在設(shè)計選框時，除了選框本身可點(diǎn)擊，也可以擴(kuò)大點(diǎn)擊區(qū)域到文字標(biāo)簽上
02邊緣目標(biāo)無限大
因為屏幕有邊界的原因，鼠標(biāo)會在屏幕邊界停止，因此邊界的寬度可以認(rèn)為是無窮大
用戶可以快速精準(zhǔn)的進(jìn)行操作，因為鼠標(biāo)很容易到達(dá)邊界，且不需要過多調(diào)整
Mac OS系統(tǒng)的菜單欄默認(rèn)放在屏幕下方，當(dāng)然也可以自己設(shè)置在左邊或右邊，總之都是在邊界上，這樣的設(shè)計就是運(yùn)用的“邊緣無限大”
因為用戶的鼠標(biāo)在移動到最下方后，鼠標(biāo)不會再繼續(xù)往下移動，光標(biāo)會一直在菜單欄上
使用戶可以不需要過多的調(diào)整，用更少的時間完成選擇
當(dāng)然，在win系統(tǒng)中也有“邊緣無限大”的例子，比如左下角的開始菜單欄，雖然它躲在角落，但是選中它的速度比放在屏幕正中間更容易，因此用戶只需要把鼠標(biāo)瀟灑的往左下角一揮，就能快速精準(zhǔn)的讓光標(biāo)達(dá)到開始菜單按鈕上
但是在Win11系統(tǒng)更新后“開始菜單欄”由左下角移動到了任務(wù)欄的中心位置（有點(diǎn)Mac的感覺），同樣還是運(yùn)用到了“邊緣無限大”
還有一個經(jīng)典的例子
Windows 操作系統(tǒng)和MAC操作系統(tǒng)中的應(yīng)用程序菜單區(qū)域(menu bar)位置的設(shè)計
實(shí)際測試和理論計算結(jié)果都表明，在使用 MAC操作系統(tǒng) 時，用戶點(diǎn)擊某個菜單所需的平均時間要比Windows上快0.4秒（來源《The humane Interface》Jef Raskin ）
注：隨著屏幕越來越大、雙屏的出現(xiàn)，由于移動距離的變長，移動時間的對比不太強(qiáng)烈
三、設(shè)計中費(fèi)茨法則的運(yùn)用
01日常生活中的設(shè)計運(yùn)用
1.1 油門與剎車
汽車上的油門踏板與剎車踏板距離（D）很小，而且剎車踏板比油門踏板（W）要大很多，當(dāng)駕駛員在駕駛車輛在替換油門或剎車時（T）所花的時間時最少的
這樣運(yùn)用費(fèi)茨法則使得駕駛員能夠在最短的時間把腳從油門踏板移動到剎車踏板上，從而達(dá)到最快速的精準(zhǔn)制動的目的
02UI設(shè)計中的設(shè)計運(yùn)用
2.1 表單填寫中的按鈕設(shè)計
在填寫的信息較少時，可以將按鈕設(shè)計在最后一個字段的下方，因為表單自帶從上往下的填寫屬性，當(dāng)用戶將信息填寫到最后一個字段時鼠標(biāo)剛好在最下方，這時按鈕設(shè)計在這個附近就減少了用戶移動鼠標(biāo)的時間
但是，當(dāng)瀏覽器一屏的高度無法將字段展示完時，把按鈕繼續(xù)設(shè)計在最下方就不是那么適用了
如果繼續(xù)把按鈕設(shè)計在下方可能會導(dǎo)致用戶在填寫一半需要操作時找不到按鈕，或是知道按鈕在哪需要花更多的時間去操作，這時可以將按鈕設(shè)計在瀏覽器下方固定住，讓按鈕始終展示在瀏覽器底部
2.2移動端表單中的按鈕設(shè)計
根據(jù)數(shù)據(jù)顯示超過50%的用戶都習(xí)慣單手使用手機(jī)，使用大拇指進(jìn)行交互，那么移動端的表單按鈕設(shè)計除了像web端的需要考慮用戶填寫順序，還要考慮“屏幕熱區(qū)”和按鈕的大小，所以在設(shè)計時我們應(yīng)該盡可能的將按鈕設(shè)計在“屏幕熱區(qū)”，然后將按鈕在不影響美觀的情況下做大一些
2.3 編輯朋友圈中的圖片刪除（邊緣無限大）
在進(jìn)行朋友圈編輯時，移除照片的操作不需要我們手動的點(diǎn)擊刪除按鈕，我們只需要將照片拖動到屏幕的底部就可以將其刪除
四、總結(jié)
1、關(guān)于“距離”
指、點(diǎn)設(shè)備離目標(biāo)越近，操作的速度越快，所以在進(jìn)行設(shè)計時，顯眼的位置不一定就是方便用戶操作的位置，優(yōu)秀的設(shè)計一定是指、點(diǎn)設(shè)備離目標(biāo)更近，或者是指、點(diǎn)設(shè)備經(jīng)過一番操作后剛好在需要點(diǎn)擊目標(biāo)附近的位置
2、關(guān)于“大小”
在設(shè)計時，我們應(yīng)該盡量將目標(biāo)設(shè)計得大一些，但不是越大越好
大小達(dá)到一個峰值時，點(diǎn)擊效率就不會再改變了，所以盡可能的做大，但也不要盲目做大，還是要考慮美觀
3、邊緣無限大
屏幕的邊緣是個好地方，適合放菜單欄和按鈕這樣的元素，由于邊角的目標(biāo)很大，鼠標(biāo)不可能超越他們，無論移動多遠(yuǎn)，鼠標(biāo)最終會停在屏幕邊緣
微信公眾號
業(yè)務(wù)咨詢：400-9969-069（24小時服務(wù)） 028-86052918
售后熱線：028-86052836
公司地址：成都市武侯區(qū)天益街38號理想中心3棟1810
